<template>
  <el-dialog
    class="global-dialog"
    :title="title"
    status-icon
    :visible="visible"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="$emit('update:visible', false)"
  >
    <div class="body">
      <slot></slot>
    </div>
    <div slot="footer" class="dialog__footer">
      <el-button @click="$emit('confirm')" :loading="confirmWorking" type="primary">确定</el-button>
      <el-button @click="$emit('close')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'GlobalDialog',
  props: {
    width: {
      type: String,
      default: '36%'
    },
    // 确认按钮loading状态
    confirmWorking: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 是否展示Dialog
    visible: {
      type: Boolean,
      required: true
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/style/variable";
.global-dialog {
  // 头部
  .el-dialog__header {
    border-bottom: 1px solid #E0E0E0;
  }
  // 内容部分
  .el-dialog__body {
    // 表单
    .el-form-item {
      margin-bottom: 18px;
      &:last-of-type {
        margin-bottom: 0;
      }
      .el-form-item__label {
        width: 90px;
        padding-right: 20px;
        text-align: right;
      }
      .el-form-item__content {
        .el-input {
          width: 300px;
          height: @input-height;
          .el-input__inner {
            width: 100%;
            height: @input-height;
          }
        }
        // 多选框
        .el-select {
          .el-input {
            width: 200px;
          }
          .el-input__icon {
            line-height: @input-height;
          }
        }
      }
      // 错误提示
      .el-form-item__error {
        left: 90px;
      }
    }
  }
  // 尾部按钮
  .el-dialog__footer {
    text-align: left;
    margin-left: 90px;
    padding-bottom: 30px;
    // 确定按钮
    .btn-ensure {
      background: @primary-color;
      color: #fff;
    }
    .el-button {
      height: @input-height;
      width: 76px;
      padding: 0;
    }
  }
}
</style>
